<template>
  <div id="btn" :class="position">
    <div :class="backgroundName">
      {{text}}
    </div>
  </div>
</template>

<script>
  export default{
    name:'nav-btn',
    props:['text','backgroundName','position']
  }
</script>

<style lang="less" scoped>
  @import "../assets/css/variables.less";
  #btn{
    /*position:fixed;*/
    bottom:0;
    width:100%;
    height:50px;
    /*background:#eee;*/
    /*opacity: .1;*/
  }
  .realtive{position:relative;}
  .fixed{position:fixed;}
  #btn div{
    postion:realtive;
    border-radius:14px;
    text-align:center;
    margin:10px 20px;
    padding:3px 0;
    letter-spacing: 2px;
    color:@white;
  }
  .orange{
    background:@orange;
  }
  .green{
    background:@green;
  }
</style>
